<template>
  <el-card class="main-card">
    <div slot="header" class="card-header">
      <h2 class="card-header-title">今日预约剩余情况</h2>
    </div>

    <el-row :gutter="15" class="stats-container">
      <el-col :sm="12" :md="6" v-for="(stat, index) in reservationStats" :key="index">
        <div class="stat-card">
          <div class="stat-department">{{ stat.department }}</div>
          <div class="stat-value">{{ stat.remaining }}</div>
          <div class="stat-desc">剩余可预约</div>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import request from '@/utils/request'

const reservationStats = ref([])
const totalRemaining = ref(0)

// 核心：调用后端新增的统计接口，获取一级科室汇总+总剩余（唯一版本，无重复）
async function fetchReservationStats() {
  try {
    const res = await request({
      url: '/system/reservation/stats',
      method: 'get',
      timeout: 5000
    });
    // 适配RuoYi后端标准格式：res.code + res.data
    if (res && res.code === 200 && res.data) {
      reservationStats.value = res.data.stats || [
        { department: '内科', remaining: 0 },
        { department: '外科', remaining: 0 },
        { department: '妇产科', remaining: 0 },
        { department: '儿科', remaining: 0 },
        { department: '其他科室', remaining: 0 }
      ]; // 一级科室汇总
      totalRemaining.value = res.data.total_remaining || 0; // 总剩余名额
    } else {
      console.error('统计接口返回格式错误：', res);
      // 降级：显示默认统计数据
      reservationStats.value = [
        { department: '内科', remaining: 0 },
        { department: '外科', remaining: 0 },
        { department: '妇产科', remaining: 0 },
        { department: '儿科', remaining: 0 },
        { department: '其他科室', remaining: 0 }
      ];
      totalRemaining.value = 0;
    }
  } catch (error) {
    console.error('获取预约统计数据失败', error);
    // 降级：显示默认统计数据
    reservationStats.value = [
      { department: '内科', remaining: 0 },
      { department: '外科', remaining: 0 },
      { department: '妇产科', remaining: 0 },
      { department: '儿科', remaining: 0 },
      { department: '其他科室', remaining: 0 }
    ];
    totalRemaining.value = 0;
  }
}

onMounted(() => {
  fetchReservationStats()
  
  // 可选：每5分钟刷新一次数据（实时更新剩余名额和统计）
  setInterval(() => {
    fetchReservationStats()
  }, 60 * 1000)
})

// 暴露方法给父组件使用
defineExpose({
  refresh: fetchReservationStats
})
</script>

<style scoped lang="scss">
.main-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 6px;

  .card-header {
    background-color: #f7f8fa;
    border-bottom: 1px solid #e5e6eb;
    padding: 12px 20px;

    .card-header-title {
      font-size: 18px;
      font-weight: bold;
      color: #1f2d3d;
      margin: 0;
    }
  }

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.stats-container {
  margin-top: 10px;
}

.stat-card {
  background-color: #f9f9f9;
  border-radius: 6px;
  padding: 20px 15px;
  text-align: center;
  height: 100%;
  border: 1px solid #e5e6eb;

  .stat-department {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
  }

  .stat-value {
    font-size: 32px;
    font-weight: bold;
    color: #20a0ff;
    margin-bottom: 5px;
  }

  .stat-desc {
    font-size: 14px;
    color: #666;
  }
}
</style>